<template>
  <div class="AuditRecords">
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>审核记录</span>
      </div>
      <div class="content">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in recordsList"
            :key="index"
            :timestamp="item.applyTime"
          >
            <template #default>
              <div>{{ applyStatus[item.applyStatus] }}</div>
              <div class="timeline-content">
                <span>审核意见：{{ item.applyCause }}</span>
                <span>审核时间：{{ item.applyTime }}</span>
                <span>操作人员：{{ item.userName }}</span>
                <span>所属单位：{{ item.areaName }}</span>
              </div>
            </template>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { queryCheckedList } from '@/utils/http/api/region'
import type { CheckRecordResp } from '@/utils/http/api/region'

const props = defineProps({
  pkid: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['commitApplyStatus'])

const applyStatus: { [key: string]: string } = {
  '0': '待审核',
  '1': '已通过',
  '-1': '已退回',
  '-2': '未提交',
}

const recordsList = ref<CheckRecordResp[]>([])

const getAuditRecords = () => {
  queryCheckedList(props.pkid).then((res) => {
    if (res.success) {
      recordsList.value = res.data
      if (res.data && res.data.length) {
        emit('commitApplyStatus', String(res.data[0].applyStatus))
      } else {
        emit('commitApplyStatus', '-2')
      }
    }
  })
}

watch(
  () => props.pkid,
  (val) => {
    if (val) {
      getAuditRecords()
    }
  }
)
</script>

<style scoped lang="scss">
.AuditRecords {
  padding: 15px 10px 15px 5px;
  overflow-y: auto;
  height: 100%;

  :deep(.el-descriptions__label) {
    display: inline-block;
    width: 102px;
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    span {
      font-size: 14px;
      line-height: 32px;
    }

    ul {
      padding-left: 0;
    }

    :deep(.el-timeline-item__timestamp) {
      display: none;
    }
  }

  .title {
    margin-top: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background-color: #28b1e4;
      border-radius: 2px;
    }

    span {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .building-info-item {
    display: flex;
    flex-direction: column;
    padding: 11px 15px;
    background-color: rgba(249, 249, 252, 1);
    border-radius: 4px;
    margin-bottom: 12px;

    color: #717689;

    .position {
      color: RGBA(39, 71, 95, 1);
    }
  }

  .timeline-content {
    display: flex;
    flex-direction: column;
    span {
      color: rgba(158, 161, 173, 1);
      font-size: 13px;
    }
  }
}
</style>
